<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取焦点-多次播放</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!--
可以控制播放速度，通过 Audio 对象的 playbackRate 属性来实现。
该属性可以设置音频的播放速度。例如，设置为 1.0 是正常速度，0.5 是半速，2.0 是两倍速。
-->

<div id ="app">
    <input type="text" placeholder="请输入单词" v-on:focus="playVoice"></input>
</div>

<script>
    new Vue({
        el:"#app",
        methods:{
            playVoice(){
                let count = 0
                const audio = new Audio("https://dict.youdao.com/dictvoice?type=1&audio=tutorial");
                audio.playbackRate = 1.5; //设置播放速度，1.5倍速度播放

                // 初次播放音频
                audio.play().catch(error=>{
                    console.error("播放错误,Please check the url");
                })

                // 监听播放结束事件
                audio.addEventListener("ended",()=>{
                    count += 1;
                    if(count < 3){ // 播放3次
                        audio.currentTime = 0; // 重置到音频开头
                        audio.play().catch(error=>{
                            console.error("播放错误,Please check the url");
                        })
                    }
                })

            }
        }
    })
</script>


</body>
</html>